<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<style>
    .el-header, .el-footer {
        float: right;
        background-color: #B3C0D1;
        color: #333;
        text-align: center;
        line-height: 60px;
    }

    .el-aside {
        background-color: #D3DCE6;
        color: #333;
        text-align: center;

    }

    .el-main {
        background-color: #E9EEF3;
        color: #333;
        text-align: center;
        /* line-height: 160px;+  */
    }

    body > .el-container {
        margin-bottom: 40px;
    }

    .el-container:nth-child(5) .el-aside,
    .el-container:nth-child(6) .el-aside {
        line-height: 260px;
    }

    .el-container:nth-child(7) .el-aside {
        line-height: 320px;
    }

    .login-register {
        float: right;
    }

    .tag {
        float: left;
        padding-left: 50%;
        padding-right: 1.5%;
    }

</style>
<body>
<div id="app">
    <el-container>
        <el-header>
            <span class="login-register">登录 | 注册</span>
        </el-header>

        <el-container>

            <el-aside width="300px">
                <div>
                    <div v-for="t in listTag" @click="addTagReadCount(t.tagUuid)">
                        <div>{{t.tagName}} ({{t.readCount}})</div>
                        <div style="padding: 5%"></div>
                    </div>
                </div>
            </el-aside>

            <el-main>
                <div>
                    <div>公告</div>
                    <div v-for="nhb in listRootHighlightBlog">
                        <div>
                            <span hidden>{{nhb.blogUuid}}</span>
                            <span hidden>{{nhb.tagUuid}}</span>
                            <span>{{nhb.tagName}}</span>
                            <span>{{nhb.blogTitle}}</span>
                            <span hidden>{{nhb.blogAuthor}}</span>
                            <span hidden>{{nhb.highlight}}</span>
                            <span>{{nhb.consumerName}}</span>
                            <span>{{nhb.blogPostDate}}</span>
                        </div>

                    </div>
                </div>
                <div style="padding: 2%;"></div>

                <div>
                    <div>
                        <div v-for="t in listTag" @click="addTagReadCount(t.tagUuid)">
                            <span class="tag">{{t.tagName}}</span>
                        </div>
                        <div style="padding: 5%;"></div>
                    </div>
                    <div v-for="nhb in listNoneHighlightBlog">
                        <div>
                            <span hidden>{{nhb.blogUuid}}</span>
                            <span hidden>{{nhb.tagUuid}}</span>
                            <span>{{nhb.tagName}}</span>
                            <span>{{nhb.blogTitle}}</span>
                            <span hidden>{{nhb.blogAuthor}}</span>
                            <span hidden>{{nhb.highlight}}</span>
                            <span>{{nhb.consumerName}}</span>
                            <span>{{nhb.blogPostDate}}</span>
                        </div>
                        <div style="padding: 2%;"></div>
                    </div>
                </div>

                <div>
                    <div class="block">
                        <el-pagination
                                @size-change="handleSizeChange"
                                @current-change="handleCurrentChange"
                                :current-page.sync="paginationVO.pageNum"
                                :page-size="paginationVO.pageSize"
                                layout="prev, pager, next, jumper"
                                :total="1000">
                        </el-pagination>
                    </div>
                </div>
            </el-main>

            <el-aside width="300px">
                <div>
                    <div v-for="t in listTag" @click="addTagReadCount(t.tagUuid)">
                        <div>{{t.tagName}} ({{t.readCount}})</div>
                        <div style="padding: 5%"></div>
                    </div>
                </div>
            </el-aside>
        </el-container>
    </el-container>

</div>
</body>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            listTag: [],
            listNoneHighlightBlog: [],
            listRootHighlightBlog: [],
            addTagReadCountVO: {
                tagUuid: ''
            },
            paginationVO: {
                pageNum: 1,
                pageSize: 10
            },
            paginationVO2: {
                pageNum: 1,
                pageSize: 3
            }

        },
        mounted() {
            this.getAllTag();
            this.getNoneHighlightBlog();
        },
        methods: {
            getNoneHighlightBlog() {
                axios.get('http://127.0.0.1:8181/blog/get-none-highlight-blog', {
                    params: {
                        paginationVO: this.paginationVO
                    }
                }).then(e => {
                    vm.listNoneHighlightBlog = e.data.responseObject;
                })
            },
            getAllRootHighlightBlogInfo() {
                axios.get('http://127.0.0.1:8181/blog/get-all-root-highlight-blogInfo', {
                    params: {
                        paginationVO: this.paginationVO2
                    }
                }).then(e => {
                    vm.listRootHighlightBlog = e.data.responseObject;
                })
            },
            getAllTag() {
                axios.get('http://127.0.0.1:8181/tag/get-all-tag').then(e => {
                    vm.listTag = e.data.responseObject;
                })
            },
            addTagReadCount(tagUuid) {
                vm.addTagReadCountVO.tagUuid = tagUuid;
                axios.post('http://127.0.0.1:8181/tag/add-tag-readCount', vm.addTagReadCountVO).then(() => {
                    vm.getAllTag();
                })
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                this.paginationVO.pageNum = val;
                this.getAllTag();
                this.getNoneHighlightBlog();
                console.log(`当前页: ${val}`);
            }
        }
    })
</script>
</html>
